<template>
  <div class="container">
    <div class="bg">
      <!-- <img class="img" src="@/assets/images/fkbg.jpg" alt="" /> -->
      <div class="img"></div>
      <h1 class="title" @click="$router.push('/test')">CIXINJIBAIYUEQINGTIAN</h1>
      <h6 class="des">hello world!</h6>
    </div>
    <div class="top">
      <ul id="nav">
        <li>🏠主页</li>
        <li>📚标签</li>
        <li>🐷相册</li>
        <li>👂留言</li>
        <li>⛄关于</li>
        <li>🎄枯藤</li>
        <li>🌼老树</li>
        <li>🐦昏鸦</li>
      </ul>
      <!-- <ul id="nav">
        <li>🍟</li>
        <li>🍟</li>
        <li>🍟</li>
        <li>🍟</li>
        <li>🍟</li>
        <li>🍟</li>
        <li>🍟</li>
      </ul> -->
    </div>
    <Index id="indexcom"> </Index>
    <div class="bottom"></div>
  </div>
</template>
<script>
import Index from '@/pages/index'
export default {
  components: {
    Index
  },
  mounted() {
    // //你可能疑问，div中有@mousewheel可以触发，为什么还要初始执行一次？
    // //这里初始执行一次的原因，需要看方法里面的内容去理解。当然实际操作也能看到效果
    // this.scrollInit()
    window.onscroll = function () {
      //获取滚动条位置
      var nav = document.getElementById('nav')
      var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollHeight, 90909090)
      //判断滚动条位置
      console.log(nav)
      if (scrollHeight >= 900) {
        nav.style = 'position:fixed'
        // topw.style.top = "0px"      //显示滚动条
        // goTop.style.display = "block"	 //显示按钮
      } else {
        nav.style = 'position:absolute'
        // topw.style.top = "-80px"     //隐藏滚动条
        // goTop.style.display = "none"	//隐藏按钮
      }
    }
  },
  methods: {
    // scrollInit(e) {
    //   //这个阻止滚动方法，我很早的想法，方法没毛病。
    //   //但是过程中一直得不到合适的运用，一用就是不能滑动。
    //   //但是加在这位置就可以保证卡点滑动的过程中页面可滚动
    //   //加在下面的判断区域内则先滑动一小段，没到卡点页面就没法滑动了。大家可以试下
    //   // this.stopMove()

    //   //打印值为150/-150，对应滚动上和下
    //   console.log(e, 8886666)

    //   if (e.wheelDelta < 0) {
    //     console.log('down')
    //     document.getElementById('Position1').scrollIntoView({ behavior: 'smooth', block: 'center' })
    //   } else {
    //     console.log('up')
    //     document.getElementById('Position0').scrollIntoView({ behavior: 'smooth', block: 'center' })
    //   }
    // },
    stopMove() {
      let m = function (e) {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, { passive: false }) //禁止页面滑动
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0px;
  margin: 0px;
}
body,
html {
  padding: 0px;
  margin: 0px;
}
.container {
  width: 100%;
  .bg {
    position: relative;
    height: 600px;
    .title {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      width: 100%;
      text-shadow: 0 0 10px #000;
      cursor: pointer;
    }
    .des {
      position: absolute;
      top: 53%;
      left: 60%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #dbefac;
      font-weight: bold;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
      width: 100%;
      text-shadow: 0 0 10px #000;
    }
    .img {
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(147 144 237 / 50%));
      // object-fit: cover;
      // object-position: 100% 86%;
    }
  }
  .top {
    width: 200px;
    #nav {
      width: 700px;
      height: 100px;
      list-style: none;
      font-weight: bold;
      color: #fff;
      font-family: '微软雅黑';
      // text-align: center;
      text-shadow: 0 0 5px #000;
      display: flex;
      position: absolute;
      top: 1%;
      right: 1%;
      li {
        width: 170px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          font-size: 25px;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
